<template>
	<uni-popup ref="popup" background-color="rgba(0,0,0,0)" :mask-click="false" @change="popupChange">
		<view class="buy-poup-content">
			<view class="buy-poup-top">
				<image :src="dataSource.image" mode="widthFix">
				</image>
				<view class="info-detail">
					<view class="title line1">
						 {{dataSource.title}}
					</view>
					<view class="now-price-wrapper">
						<text>{{currentData.price}}</text>
						<text>积分</text>
					</view>
					<view class="spec-tip-text">
						<text>已选择</text>
						<text>{{currentData.name}}</text>
					</view>
				</view>
				<view class="close-wrap" @click="close">
					<uni-icons type="close" size="30" color="#ccc"></uni-icons>
				</view>
			</view>
			<view v-if="step==1">
				<view class="sku-select">
					<view class="specification">
						<view class="title">规格</view>
						<view class="item">
							<text v-for="(item,index) in productSkus" :data-spec="item.id" :class="item.id==currentData.id?'spec active':'spec'"  @click="selSku(item)">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="number-select" @click="numEvent">
					<view class="left">
						数量
					</view>
					<uni-number-box v-model="num" :min="1" :max="1" />
				</view>
			</view>
			<view class="determine" @click="next" v-if="step==1">
				下一步
			</view>
			<sel-address v-if="step==2" @submit="submit" :list="addressList"></sel-address>
		</view>
	</uni-popup>
</template>

<script>
	import selAddress from "@/components/sel-address/sel-address.vue"
	import getSign from "@/common/getSign.js"
	export default {
		name: "product-specification",
		props: {
			dataSource: {
				type: Object,
				default: null
			}
		},
		components: {
			selAddress
		},
		data() {
			return {
				step: 1,
				city: "",
				num: 1,
				addressList: [],
				currentData: {
					id: 0,
					name: '默认',
					price: '0'
				},
				productSkus:[]
			};
		},
		watch:{
			dataSource(newVal, oldVal){
				this.productSkus = newVal.product_skus
				if(this.productSkus.length > 0){
					this.currentData = this.productSkus[0]
				} else {
					this.currentData.price = newVal.priceText
				}
			}
		},
		methods: {
			// 获取默认地址
			getDefaultAddress() {
				
			},
			skuChangeEvent(data) {
				this.specObj = Object.assign({}, this.specObj, data)
			},
			submit(obj) {
				console.log("地址填写无误", obj)
				// 写入地址
				this.$store.commit('setAddress', obj)
				this.$store.commit('setUserInfo', {
					openid: getSign.md5(obj.phone),
					userid: obj.phone.substring(0, 3) + '******' + obj.phone.substring(obj.phone.length - 2, obj
						.phone.length)
				})
				uni.navigateTo({
					url:"/pages/order/order"
				})
			},
			next() {
				this.$api
					.userAddress({
						openid: uni.getStorageSync('openid')
					})
					.then(res => {
						if (res.data) {
							this.addressList = res.data;
							this.step = 2;
						}
					});
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close();
			},
			popupChange(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			selSku(item){
				this.currentData = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-poup-content {
		width: 100%;
		padding: 30rpx 30rpx 50rpx;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;

		.buy-poup-top {
			width: 100%;
			position: relative;
			// display: flex;
			// flex-direction: column;
			box-sizing: border-box;

			// justify-content: flex-end;
			image {
				width: 230rpx;
				height: 230rpx;
				border: 1px solid rgba(0, 0, 0, .1);
				position: absolute;
				border-radius: 5rpx;
			}

			.title {
				font-size: $uni-font-size-base;
				font-weight: bold;
			}

			.info-detail {
				height: 230rpx;
				margin-left: 240rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: flex-end;

				.now-price-wrapper {
					color: $theme-color;
					margin-bottom: 10rpx;
					display: flex;
					align-items: baseline;

					text {
						font-weight: bold;
						font-size: $uni-font-size-lg ;

						&:first-of-type {
							font-size: 42rpx;
						}
					}
				}

				.spec-tip-text {
					color: $uni-text-color-grey;

					text {
						margin-right: 20rpx;
					}
				}
			}

			.close-wrap {
				position: absolute;
				right: 0;
				top: 0;
			}
		}


		.determine {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background-color: $theme-color;
			text-align: center;
			border-radius: 5rpx;
			font-size: $uni-font-size-base;
		}


	}
	.sku-select {
		display: flex;
		flex-direction: column;
	
		.specification {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
	
			.title {
				margin-bottom: 20rpx;
				font-weight: 600;
			}
	
			.item {
				.spec {
					min-width: 120rpx;
					height: 80rpx;
					margin-right: 20rpx;
					margin-top: 10rpx;
					border-radius: 10rpx;
					border: 2px solid #f5f5f5;
					align-items: center;
					justify-content: center;
					text-align: center;
					display: inline-flex;
					background: #f5f5f5;
					padding: 16rpx;
					box-sizing: border-box;
				}
	
				.active {
					background: #fff;
					color: $theme-color;
					border: 2px solid $theme-color;
					position: relative;
					border-radius: 10rpx;
	
					&:before {
						content: "✓";
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}
	}
	
	.number-select {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx auto;
	}
</style>